<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- 三级联动组件 -->
      <CategorySelect
        @getCategorySelectid="getCategorySelectid"
        :isshowselect="isShow"
      ></CategorySelect>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template>
        <div v-show="isShow">
          <el-button
            style="margin-bottom: 10px"
            type="primary"
            size="default"
            @click="addATTR"
            :disabled="list.length === 0 ? true : false"
            >增加属性</el-button
          >
          <el-table style="width: 100%" border :data="list">
            <!-- 表格序号 -->
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            >
            </el-table-column>
            <!-- 表格的属性名称 -->
            <el-table-column
              prop="attrName"
              label="属性名称"
              width="150"
              align="center"
            >
            </el-table-column>
            <!-- 表格的属性列表 -->
            <el-table-column
              prop="prop"
              label="属性列表"
              width="width"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <el-tag
                  v-for="item in row.attrValueList"
                  :key="item.id"
                  closable
                  :type="items[item.id % 4].type"
                  style="margin: 5px"
                >
                  {{ item.valueName }}
                </el-tag>
              </template>
            </el-table-column>
            <!-- 表格的操作 -->
            <el-table-column
              prop="prop"
              label="操作"
              width="150"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <!-- 插槽携带修改按钮和删除按钮 -->
                <el-button
                  type="warning"
                  size="mini"
                  @click="updatanlog(row)"
                  icon="el-icon-edit"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="deleteTradeMark(row)"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template>
        <div v-show="!isShow">
          <!-- 顶部 输入框 属性名 -->
          <el-form
            ref="form"
            label-width="80"
            :inline="true"
            size="normal"
            :model="attrInfo"
          >
            <el-form-item label="属性名">
              <el-input
                placeholder="请输入属性名"
                v-model="attrInfo.attrName"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button
            type="primary"
            icon="el-icon-plus"
            style="margin: 0 0 10px 10px"
            @click="addAttrlistvalue"
            :disabled="attrInfo.attrName.length === 0 ? true : false"
            >增加属性值</el-button
          >
          <el-button @click="isShow = true">取消</el-button>
          <!-- 中间 大表格-->
          <el-table style="width: 100%" border :data="attrInfo.attrValueList">
            <!-- 表格的序号 -->
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            >
            </el-table-column>
            <!-- 表格的属性名 -->
            <el-table-column
              prop="prop"
              label="属性值名称"
              width="width"
              align="center"
            >
              <template slot-scope="{ row, $index }">
                <el-input
                  v-model="row.valueName"
                  placeholder="输入属性值"
                  size="normal"
                  clearable
                  v-show="row.flag"
                  @blur="loseblur(row)"
                  :ref="$index"
                ></el-input>
                <span v-show="!row.flag" @click="toEdit(row, $index)">
                  {{ row.valueName }}
                </span>
              </template>
            </el-table-column>
            <!-- 表格的操作 -->
            <el-table-column
              prop="prop"
              label="操作"
              width="width"
              align="center"
            >
              <template slot-scope="{ row, $index }">
               
                <el-popconfirm :title="`确定删除${row.attrName}吗？`"  @onConfirm="suredelate($index)">
                  <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="detailrowdata(row)"
                  slot="reference"
                 
                  >删除</el-button
                >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!-- 底部 保存和删除按钮-->
          <el-button
            type="primary"
            icon="el-icon-check"
            style="margin: 10px 10px"
            @click="saveeditoradd"
            :disabled="attrInfo.attrValueList.length === 0"
            >保存</el-button
          >
          <el-button icon="el-icon-close" @click="isShow = true"
            >取消</el-button
          >
        </div>
      </template>
    </el-card>
  </div>
</template>
<script>
import cloneDeep from "lodash/cloneDeep";
export default {
  data() {
    return {
      list: [],
      items: [
        { type: "" },
        { type: "success" },
        { type: "info" },
        { type: "warning" },
      ],
      isShow: true,
      attrInfo: {
        attrName: "",
        attrValueList: [],
        categoryId: 0,
        categoryLevel: 3,
      },
      category3Id: 0,
      o_obj:{}
    };
  },
  methods: {
    getCategorySelectid(oobj) {
      //子组件传递过来的 数据
      this.o_obj = JSON.parse(oobj);
      this.getCategorySelectdata();
    },
    async getCategorySelectdata() {
      this.category3Id = this.o_obj.category3Id;
      let result = await this.$API.attr.getAttrdata(this.o_obj);
      if (result.code === 200) {
        this.list = result.data;
      }
    },
    addATTR() {
      this.isShow = false;
      this.attrInfo = {
        attrName: "",
        attrValueList: [],
        categoryId: this.category3Id,
        categoryLevel: 3,
      };
    },
    updatanlog(row) {
      this.attrInfo = cloneDeep(row);
      this.isShow = false;
      this.attrInfo.attrValueList.forEach((item) => {
        this.$set(item, "flag", false); //视图会更新
      });
    },
    deleteTradeMark() {},
    //表格删除函数
    detailrowdata(row) {},
    addAttrlistvalue() {
      this.attrInfo.attrValueList.push({
        attrId: this.attrInfo.id,
        valueName: "",
        flag: true,
      });

      this.$nextTick(() => {
        this.$refs[this.attrInfo.attrValueList.length - 1].focus();
      });
    },
    loseblur(row) {
      if (row.valueName.trim() == "") {
        this.$message("输入不规范,请重新输入");
        return;
      }
      let isRepat = this.attrInfo.attrValueList.some((item) => {
        if (row != item) {
          //!=是除了自身意外的其他元素
          return row.valueName == item.valueName;
        }
      });
      if (isRepat) {
        this.$message("输入不规范,请重新输入");
        return;
      }
      row.flag = false;
    },
    toEdit(row, index) {
      row.flag = true;
      this.$nextTick(() => {
        this.$refs[index].focus();
      });
    },
    //确定删除属性值静态
    suredelate(index){
      this.attrInfo.attrValueList.splice(index,1)
    },
    //保存按钮的业务需求:
    async saveeditoradd(){
      this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item =>{
        if(item.valueName != ''){
          delete item.flag;
          return true
        }
      });
      //点击保存后发起请求 将已经准备好的数据attrinfo发过去
      let result =await  this.$API.attr.saveAttrInfo(this.attrInfo);
      if (result.code === 200) { 
        this.isShow = true;
        this.$message({
          type:'success',
          message:"成功"
        });
        this.getCategorySelectdata()
        
      }
    }
  },
};
</script>
<style></style>
